Class 1 Lecture Demo

Class 1 Agenda:

Class 1 Demonstration Labs:

  • Lecture Demo 1 - Web Map Examples | Browser Development Tools
  • Lecture Demo 2 - CARTO Signup Process
  • Lecture Demo 3 - VS Code fundamentals
  • Lecture Demo 4 - GIS Stack Exchange
  • Lecture Demo 5 - creating geojson via geojson.io

Class 1 Demonstration Labs:

Lecture Demo 1: Web Map Examples | Browser Development Tools

  • To start, Open up Google Chrome Browser from the Start Menu.

  • Next, access the following web map example from the opened Chrome Browser:

  • LINK to web map

  • https://www.oilmap.xyz/

Next, activate Developer Tools from the top, right-side kebab button:

Developer Tools

This will open an interface in which we can view both web page code (Elements) and the web page performance (Console). Notice that the Elements tab is currently active, and the web page element with the nav id = menu is highlighted. We can see both the menu html and the menu css as well as the element highlighted at the web page itself as nav#menu at the far left:

Elements open with element nav id = menu highlighted

To follow, a short series of web map examples. After the class, during the upcoming assignment week, review some of these web map examples using Developer Tools. Become familiar with how Developer Tools is able to isolate different page elements and report back code information about those elements.

Lecture Demo 2: CARTO Signup Process

To start this upcoming week assignment, you will create your CARTO user account that will be used throughout the course. Here we will preview the login location and the initial platform interface:

The New School CARTO platform Signup Once logged in, the upper left menu bar will feature two locations - Maps and Data. In the upcoming week’s assignment, you will make your first CARTO web map using both options:

CARTO Maps | Data

Lecture Demo 3: VS Code fundamentals

A code editor will be utilized throughout the course to write, test and produce code for weekly mapping assignments as well as the final project. There are many code editors that are freely available and quite good. We will utilize VS Code as our desktop editor. The VS Code editor will be installed into the lab computers for the course. To follow, we will open the editor on the lab computers and load in a critical extension - Live Server.

To start, download and unzip the code test. We will open the folder from within VS Code. Once opened, we will see 2 .html and 1 .js documents. These 3 documents mirror the AJAX example shown in this week’s lecture 1:

VS Code Editor Folder Interface

index.html

ajax_info_html

demo.js

Next, we will install the Live Server extension and test the code once the extension is enabled:

Installing Live Server Extension

Lecture Demo 4: GIS Stack Exchange

Throughout the course there will be instances where code assistance is needed. We will utilize the course Slack workplace as the communication platform during the week; and the technical q/a channel will be where typical questions will be posted. In addition to this primary resource, all students should be checking GIS stackexchange:

GIS stackexchange - query = CARTO

By searching related stackexchange posts for a particular problem (creating successful queries is both art + experience), you will often find at least one, if not several, approaches to a particular coding problem.

Lecture Demo 5: creating geojson via geojson.io

In the first week assignment, you will map a dataset within your CARTO account. Throughout the course, we will discuss where to gain data with a permissible license to use in an online context; for now, anything that you make on your own would be generally be permissible within CARTO.

A simple option to create data quickly can be done via geojson.io. Navigate to the site, create a simple dataset - points, lines, polygons - and download as a .geojson file format:

Creating points in geojson.io

As a result, a map.geojson file will be created and downloaded to your local drive. This process can be used to create and load geodata to your CARTO account in your week 1 assignment.